<template>
  <div class="sdy-dateil">
    <SdyHeader title="啥都有~详情页" back>sousuo</SdyHeader>
    详情页内容
    <van-image :src="GoodsList.img2" class="image"></van-image>
    <p>{{ GoodsList.proname }}</p>

    <Teleport to="#sdy-footer">
    
      <van-action-bar>
        <van-action-bar-icon icon="chat-o" text="客服" color="#ee0a24" />
        <van-action-bar-icon @click="$router.push({path:'/cart'})" icon="cart-o" text="购物车" />
        <van-action-bar-icon icon="star" text="已收藏" color="#ff5000" />
        <van-action-bar-button type="warning" @click="addCart"  text="加入购物车" />
        <van-action-bar-button type="danger" text="立即购买" />
      </van-action-bar>
    
  </Teleport>
  </div>
</template>
                          
  
<script setup lang="ts">
//拿到商品id
//如果没有跳转到列表
import { ref, onMounted } from 'vue';
import { Dialog } from 'vant';
import { useRoute, useRouter, type Router, type RouteLocationNormalized } from 'vue-router';
import { getGoodsDetailApi } from '@/api/goods'
import type { MyHotItem } from '@/config/interface';
const $route: RouteLocationNormalized = useRoute()
const $router: Router = useRouter()

//验证是否存在token
const testProid = () => {
  const proid = $route.query.proid
  // console.log(proid);
  if (!proid) {
    Dialog({
      title: '提示',
      message: '您要查看的商品不存在，请重试',
    }).then(() => {
      //拿来回哪去
      $router.back()
    });

  }

}
//  准备一个数组 来存储数据 渲染页面
const GoodsList = ref<MyHotItem>({} as MyHotItem)
//请求商品详细信息
const getGoodsInfo = async () => {
  const res = await getGoodsDetailApi($route.query.proid as string)
  console.log(res);
  GoodsList.value = res.data

}
// 加入购物车
const addCart = () => {
  console.log('加入购物车')
}

onMounted(() => {
  testProid()
  getGoodsInfo()
})

</script>
  
<style scoped lang="scss">
.sdy-dateil {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-direction: column;
  flex-wrap: wrap;

}

.image {
  width: 100%;
  height: 350px;
}
</style>